<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <ul>
        <li class="li">helloWorld1</li>
        <li class="li">helloWorld2</li>
        <li class="li">helloWorld3</li>
        <li class="li">helloWorld4</li>
        <li class="li">helloWorld5</li>
    </ul>
</div>
<script>
    /*
    *DOM访问关系节点的获取
    * 1.获取元素的父元素：parentNode，parentElement
    * 2.获取子元素：children
    *   获取子节点：childNodes
    * 3.下一个元素：nextElementSibling
    *   下一个节点：nextSibling
    *   上一个节点：previousSibling
    *   上一个元素：previousElementSibling
    *
    * */
    var ul = document.querySelector("ul");
    //加上[ ]可以看到文档树
    //console.log([ul]);
    // 1.获取元素的父元素：parentNode，parentElement
    var par = ul.parentNode;
    var parElement = ul.parentElement;
    var child = document.querySelector("ul>li:nth-child(2)");
    //2.获取兄弟元素的下一个元素
    var nextChild = child.nextElementSibling;

</script>
</body>
</html>